<template>

  <div class="innerContainer">
    <common-title>
      <template #expand> </template>
    </common-title>

    <div class="innerPane">
      <div class="filterArea">
        <el-form :inline="true" :model="filterForm" class="demo-form-inline">
          <el-form-item label="产品型号">
            <el-select multiple collapse-tags  v-model="searchForm.modelCode" placeholder="请选择产品型号" @change="handleChange">
              <el-option v-for="item in modelList" :key="item.value"  :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="设备名称">
            <el-input @keyup.enter="search" v-model="searchForm.name" placeholder="请输入设备名称"></el-input>
          </el-form-item>

          <el-form-item label="设备编码">
            <el-input @keyup.enter="search" v-model="searchForm.code" placeholder="请输入设备编码"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button plain type="primary" @click="search">查询</el-button>
            <el-button plain @click="onClear">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table :data="tableData" border row-key="mapMacCode" style="width: 100%;" :cell-style="{ textAlign: 'center' }"
        row-class-name="fixed-row">
        <el-table-column header-align="center" type="index" label="序号" width="80" />
        <el-table-column header-align="center" prop="mapName" label="设备名" width="180" />
        <el-table-column header-align="center" prop="modelCode" label="产品类型" width="180" />
        <el-table-column header-align="center" prop="mapSnCode" label="sn码" width="160" />
        <el-table-column header-align="center" prop="projectName" label="所属项目" />

        <el-table-column header-align="center" prop="gpsstatus" label="GPS同步" width="120">
          <template #default="scope">
            {{ getGpsText(scope.row) }}
          </template> </el-table-column>
        <el-table-column header-align="center" prop="lastRcvTime" label="近期通信" />

        <el-table-column label="操作" header-align="center" width="180" prop="col9">
          <template #default="scope">
            <el-link type="primary" size="small" @click="view(scope.$index, scope.row)">详情</el-link>

            <el-link type="primary" size="small" @click="edit(scope.$index, scope.row)">设置</el-link>

            <el-link type="primary" size="small" @click="handleUploadData(scope.row)">数据上传</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination class="pagination" :current-page="searchForm.current" :page-size="searchForm.size"
        :page-sizes="[10, 20, 30, 40, 100]" layout="->,total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

    <detail-setting ref="detailSetting" />
    <upload-data ref="uploadRef" />
  </div>


</template>

<script setup>

defineOptions({
  name: "equipment"
})

import CommonTitle from "@/components/CommonTitle.vue";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";

import { equipmentList,getProductList } from "../../utils/requests";
import DetailSetting from "./DetailSetting.vue";
import UploadData from "./upload.vue"

const router = useRouter();

// Dom 挂载之后
onMounted(() => {
  requestModelList();
  search();
});

// 用户数据
let tableData = ref([]);

let total = ref(0);
// 搜索条件
const searchForm = reactive({
  current: 1,
  size: 10,
  name: null,
  code: null,
  msgProt: "MQTT",
  modelCode: null,
});

const onClear = () => {
  searchForm.name = "";
  searchForm.code = "";
  searchForm.size = 10;
  searchForm.modelCode=null;
  searchForm.current = 1;
  search();
};


const handleSizeChange = (size) => {
  searchForm.size = size;
  searchForm.current = 1;
  search();
};
const handleCurrentChange = (current) => {
  searchForm.current = current;
  search();
};

const search = () => { 
  equipmentList(searchForm).then((res) => {
    tableData.value = res.records;
    total.value = res.total;
  });
};

const modelList = ref([]);
const requestModelList = () => {
  getProductList().then((res) => {
    modelList.value = res.map((item) => ({
      label: item.modelName+(item.remark?`(${item.remark})`:""),
      value: item.modelCode,
    }));
  });
};

const handleChange = (val) => {
  searchForm.modelCode = val;
  search();
};

// 详情查看弹窗
const view = (index, row) => {
  router.push({
    name: "equipmentDetail",
    query: {
      channel: row.channelCount,
      code: row.code,
      name: row.mapName,
      id: row.id,
    },
  });
};


let detailSetting = ref(null);

const edit = (index, row) => {
  detailSetting.value.openDialog(row.code);
};

let uploadRef = ref(null);
const handleUploadData = (rowData) => {
  uploadRef.value.openDialog(rowData);
}



const getGpsText = (rowData) => {
  return rowData.gpsstatus === 1 ? "是" : "否";
};


</script>

<style scoped></style>
